<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置 - DNF福利盒子</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f2f2f7;
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }
        .status-bar {
            height: 44px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            font-size: 14px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        .nav-bar {
            height: 44px;
            background: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            border-bottom: 1px solid #e5e5ea;
            position: fixed;
            top: 44px;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        .content {
            padding: 88px 16px 83px;
            height: calc(100vh - 127px);
            overflow-y: auto;
        }
        .tab-bar {
            height: 83px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #e5e5ea;
            z-index: 1000;
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: #8e8e93;
            font-size: 10px;
        }
        .tab-item.active {
            color: #007aff;
        }
        .tab-item i {
            font-size: 22px;
        }
        .settings-section {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .settings-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 0;
            border-bottom: 1px solid #f2f2f7;
        }
        .settings-item:last-child {
            border-bottom: none;
        }
        .item-info {
            flex: 1;
        }
        .item-name {
            font-size: 16px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 4px;
        }
        .item-desc {
            font-size: 12px;
            color: #8e8e93;
        }
        .toggle-switch {
            position: relative;
            width: 51px;
            height: 31px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #e5e5ea;
            transition: .4s;
            border-radius: 34px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 27px;
            width: 27px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #007aff;
        }
        input:checked + .slider:before {
            transform: translateX(20px);
        }
        .badge {
            background: #007aff;
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        .btn {
            padding: 16px;
            border-radius: 12px;
            font-weight: 600;
            text-align: center;
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
            width: 100%;
            margin-top: 8px;
        }
        .btn-primary {
            background: #007aff;
            color: white;
        }
        .btn-primary:hover {
            background: #0056d6;
        }
        .btn-secondary {
            background: #f2f2f7;
            color: #1d1d1f;
        }
        .btn-secondary:hover {
            background: #e5e5ea;
        }
        .btn-danger {
            background: #ff3b30;
            color: white;
        }
        .btn-danger:hover {
            background: #d70015;
        }
        .version-info {
            text-align: center;
            color: #8e8e93;
            font-size: 14px;
            margin-top: 30px;
        }
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        .modal-content {
            background: white;
            border-radius: 16px;
            padding: 24px;
            width: 300px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            text-align: center;
        }
        .modal-text {
            text-align: center;
            margin-bottom: 20px;
            color: #8e8e93;
        }
        .modal-actions {
            display: flex;
            gap: 12px;
        }
        .modal-btn {
            flex: 1;
            padding: 12px;
            border-radius: 8px;
            font-weight: 600;
            text-align: center;
            cursor: pointer;
        }
        .modal-btn-cancel {
            background: #f2f2f7;
            color: #1d1d1f;
            border: none;
        }
        .modal-btn-confirm {
            background: #007aff;
            color: white;
            border: none;
        }
        .modal-btn-danger {
            background: #ff3b30;
            color: white;
            border: none;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar">
        <span>12:34</span>
        <span>📶 5G</span>
    </div>

    <!-- 导航栏 -->
    <div class="nav-bar">
        <span>设置</span>
        <span></span>
    </div>

    <!-- 内容区域 -->
    <div class="content">
        <!-- 通用设置 -->
        <div class="settings-section">
            <div class="section-title">
                <i class="fas fa-cog"></i>
                <span>通用设置</span>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">自动更新检查</div>
                    <div class="item-desc">自动检查应用更新</div>
                </div>
                <label class="toggle-switch">
                    <input type="checkbox" checked>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">深色模式</div>
                    <div class="item-desc">启用深色主题</div>
                </div>
                <label class="toggle-switch">
                    <input type="checkbox">
                    <span class="slider"></span>
                </label>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">语言</div>
                    <div class="item-desc">简体中文</div>
                </div>
                <span style="color: #007aff; font-weight: 600;">中文</span>
            </div>
        </div>

        <!-- 通知设置 -->
        <div class="settings-section">
            <div class="section-title">
                <i class="fas fa-bell"></i>
                <span>通知设置</span>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">推送通知</div>
                    <div class="item-desc">接收应用推送通知</div>
                </div>
                <label class="toggle-switch">
                    <input type="checkbox" checked>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">领取成功通知</div>
                    <div class="item-desc">福利领取成功时通知</div>
                </div>
                <label class="toggle-switch">
                    <input type="checkbox" checked>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">定时任务提醒</div>
                    <div class="item-desc">定时任务开始前提醒</div>
                </div>
                <label class="toggle-switch">
                    <input type="checkbox" checked>
                    <span class="slider"></span>
                </label>
            </div>
        </div>

        <!-- 安全设置 -->
        <div class="settings-section">
            <div class="section-title">
                <i class="fas fa-shield-alt"></i>
                <span>安全设置</span>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">自动清理Cookie</div>
                    <div class="item-desc">定期清理浏览器缓存</div>
                </div>
                <label class="toggle-switch">
                    <input type="checkbox">
                    <span class="slider"></span>
                </label>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">安全模式</div>
                    <div class="item-desc">增强的安全保护</div>
                </div>
                <label class="toggle-switch">
                    <input type="checkbox" checked>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">数据加密</div>
                    <div class="item-desc">加密存储敏感信息</div>
                </div>
                <span class="badge">已启用</span>
            </div>
        </div>

        <!-- 高级功能 -->
        <div class="settings-section">
            <div class="section-title">
                <i class="fas fa-star"></i>
                <span>高级功能</span>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">批量操作</div>
                    <div class="item-desc">多盒子同时领取</div>
                </div>
                <span class="badge">专业版</span>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">云端同步</div>
                    <div class="item-desc">多设备数据同步</div>
                </div>
                <span class="badge">专业版</span>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">智能脚本</div>
                    <div class="item-desc">自动适配新活动</div>
                </div>
                <span class="badge">专业版</span>
            </div>
            <button class="btn btn-primary" onclick="upgradeToPro()">
                <i class="fas fa-crown"></i> 升级到专业版
            </button>
        </div>

        <!-- 数据管理 -->
        <div class="settings-section">
            <div class="section-title">
                <i class="fas fa-database"></i>
                <span>数据管理</span>
            </div>
            <button class="btn btn-secondary" onclick="exportData()">
                <i class="fas fa-download"></i> 导出数据
            </button>
            <button class="btn btn-secondary" onclick="importData()">
                <i class="fas fa-upload"></i> 导入数据
            </button>
            <button class="btn btn-secondary" onclick="clearCache()">
                <i class="fas fa-broom"></i> 清除缓存
            </button>
        </div>

        <!-- 账户与支持 -->
        <div class="settings-section">
            <div class="section-title">
                <i class="fas fa-user-circle"></i>
                <span>账户与支持</span>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">用户ID</div>
                    <div class="item-desc">u1234567890</div>
                </div>
            </div>
            <div class="settings-item">
                <div class="item-info">
                    <div class="item-name">版本信息</div>
                    <div class="item-desc">DNF福利盒子 v1.0.0</div>
                </div>
            </div>
            <button class="btn btn-secondary" onclick="contactSupport()">
                <i class="fas fa-headset"></i> 联系支持
            </button>
            <button class="btn btn-secondary" onclick="checkUpdate()">
                <i class="fas fa-sync"></i> 检查更新
            </button>
            <button class="btn btn-danger" onclick="showResetConfirm()">
                <i class="fas fa-trash"></i> 重置应用
            </button>
        </div>

        <div class="version-info">
            DNF福利盒子 v1.0.0 (Build 20250101)<br>
            © 2025 DNF福利盒子团队
        </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="tab-bar">
        <div class="tab-item">
            <i class="fas fa-gift"></i>
            <span>福利</span>
        </div>
        <div class="tab-item">
            <i class="fas fa-cubes"></i>
            <span>盒子</span>
        </div>
        <div class="tab-item">
            <i class="fas fa-bolt"></i>
            <span>批量</span>
        </div>
        <div class="tab-item active">
            <i class="fas fa-cog"></i>
            <span>设置</span>
        </div>
    </div>

    <!-- 重置确认模态框 -->
    <div class="modal" id="resetConfirmModal">
        <div class="modal-content">
            <div class="modal-title">确认重置</div>
            <div class="modal-text">
                确定要重置应用吗？这将清除所有数据和设置，此操作不可恢复。
            </div>
            <div class="modal-actions">
                <div class="modal-btn modal-btn-cancel" onclick="hideResetConfirm()">取消</div>
                <div class="modal-btn modal-btn-danger" onclick="resetApp()">确认重置</div>
            </div>
        </div>
    </div>

    <script>
        function upgradeToPro() {
            alert('跳转到专业版升级页面');
        }

        function exportData() {
            alert('开始导出数据...');
        }

        function importData() {
            alert('开始导入数据...');
        }

        function clearCache() {
            alert('清除缓存完成');
        }

        function contactSupport() {
            alert('联系技术支持');
        }

        function checkUpdate() {
            alert('检查更新中...');
        }

        function showResetConfirm() {
            document.getElementById('resetConfirmModal').style.display = 'flex';
        }

        function hideResetConfirm() {
            document.getElementById('resetConfirmModal').style.display = 'none';
        }

        function resetApp() {
            alert('应用已重置，所有数据已清除');
            hideResetConfirm();
        }

        // 初始化开关状态
        document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const settingName = this.parentElement.parentElement.querySelector('.item-name').textContent;
                console.log(`${settingName} ${this.checked ? '启用' : '禁用'}`);
            });
        });

        // 点击模态框背景关闭
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>